<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello WebSocket</title>
    <link rel="stylesheet" href="/plug-in/pear/css/pear.css">
    <link rel="stylesheet" href="/css/base.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--<script src="/plug-in/websocket/web-socket.js"></script>-->
    <style>
        .user{
            font-size: 18px;
        }
        .user span{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="main-content" class="page-content" style="padding: 20px">
    <p class="user" shiro:user >
        Hello, <span class="name" shiro:principal ></span>, how are you today?
    </p>
    <hr >
    <blockquote style="padding: 10px 15px" class="layui-elem-quote">web-socket 发送消息（测试）</blockquote>
    <div>
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">发送给用户</label>
                <div class="layui-input-block">
                    <select name="username" lay-verify="required">
                        <option value="">请选择用户</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">消息内容</label>
                <div class="layui-input-block">
                    <textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button type="submit" class="pear-btn pear-btn-primary" lay-submit="" lay-filter="send">发送</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="/plug-in/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/plug-in/layui/layui.js"></script>
<script type="text/javascript" src="/plug-in/lay-config.js"></script>
<script src="/plug-in/websocket/sockjs.min.js"></script>
<script src="/plug-in/websocket/stomp.min.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "/user/online-user",
            success(res){
                $.each(res.data, (index, data)=>{
                    $("select[name=username]").append(
                        $("<option></option>").text(data.nickname).attr("value", data.username)
                    )
                })
                layui.form.render()
            }
        })
        //os.arch os.name os.version
        $.ajax({
            url: "/actuator/env",
            success(res){
                //console.log(res.propertySources[2].properties)
                //console.log(res)
                console.log("os: " + res.propertySources[2].properties['sun.desktop'].value)
                console.log("name: " + res.propertySources[2].properties['os.name'].value)
                console.log("arch: " + res.propertySources[2].properties['os.arch'].value)
            }
        })
        //free threshold total
        $.ajax({
            url: "/actuator/health",
            success(res){
                console.log("database: " + res.components.db.details.database)
                console.log("total: " + memoryConversion(res.components.diskSpace.details.total))
                console.log("free: " + memoryConversion(res.components.diskSpace.details.free))
                console.log("threshold: " + memoryConversion(res.components.diskSpace.details.threshold))
            }
        })

        $.ajax({
            url: "/activities/start/123",
            type: "POST",
            data: {
                formJson: JSON.stringify({
                    id: "54645",
                    name: "Towexin"
                })
            },
            success(res){
                console.log(res)
            }
        })

        Object.defineProperties(parent.online, {
            users: {
                configurable: true,
                set: function (newValue) {
                    $("select[name=username]").html("").append(
                        $("<option></option>").text("请选择用户").attr("value", "")
                    )
                    $.each(newValue, (index, data)=>{
                        $("select[name=username]").append(
                            $("<option></option>").text(data.nickname).attr("value", data.username)
                        )
                    })
                    layui.form.render()
                }
            }
        })
        //监听提交
        layui.form.on('submit(send)', function(data){
            parent.sendMessageNoParameter(data.field.username, data.field.content)
            return false
        })
    })

    /**
     * 内存换算
     * @param value 字节
     */
    function memoryConversion(value) {
        if (value<1024){
            return value + " B"
        }else {
            if (parseInt(value/1024)<1024){
                return parseInt(value/1024) + " KB"
            }else {
                if (parseInt(value/1024/1024)<1024){
                    return parseInt(value/1024/1024) + " MB"
                }else {
                    if (parseInt(value/1024/1024/1024)<1024){
                        return parseInt(value/1024/1024/1024) + " GB"
                    }else {
                        return parseInt(value/1024/1024/1024/1024) + " TB"
                    }
                }
            }
        }
    }

</script>
</body>
</html>